<template>
  <v-app id="inspire">
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-12">
              <v-toolbar dark color="primary">
                <v-toolbar-title>江西魔方考勤平台</v-toolbar-title>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field
                    prepend-icon="person"
                    name="login"
                    label="账号"
                    type="text"
                    v-model="account"
                  ></v-text-field>
                  <v-text-field
                    id="password"
                    prepend-icon="lock"
                    name="password"
                    label="密码"
                    type="password"
                    v-model="password"
                  ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-flex class="headline text-xs-center">
                  <v-btn color="primary" @click="handleLogin">登录</v-btn>
                  <v-btn @click="handleClear">重置</v-btn>
                </v-flex>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    account: "",
    password: ""
  }),
  methods: {
    handleLogin() {
      // if(this.account=='123' && this.password=="123"){
        this.$router.push({ path: "/overall" });
      // }
    },
    handleClear() {
      this.account = "";
      this.password = "";
    }
  }
};
</script>